<template>
  <a-select :placeholder="placeholder"
    :disabled="disabled"
    :value="thisValue"
    mode="multiple"
    @change="onChange">
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
        {{ item.text || item.label }}
      </span>
    </a-select-option>
  </a-select>
</template>

<script>
  import {getAction} from '../../api/manage';
  // 下拉多选
  export default {
    name: "AkSelectMultipleTag",
    props: {
      url: String,
      placeholder: String,
      value:{
        type: String,
        required: false
      },
    },
    data() {
      return {
        thisValue:[],
        dictOptions: [],
        disabled:false,
      }
    },
    created() {
      //获取字典数据
      this.initDictData();
      if(this.value){
        this.thisValue = this.value.split(",");
      }else{
          this.thisValue=[];
        }
    },
    methods: {
      initDictData() {

        getAction(this.url).then((res) => {
          if (res.success) {
            this.dictOptions = res.result;
        }});
      },
      onChange(e) {
        this.$emit('change', e.join(','));
      },
    },
    watch:{
      value(v){
        if(v){
          this.thisValue = v.split(",");
        }else{
          this.thisValue=[];
        }
      },
      url(v){
        this.initDictData();
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>
</style>